<template>
	<div class="_tool-bar flex items-center justify-between pr-4">
		<div class="mr-4">
			<el-icon class="cursor-pointer align-middle" color="gray">
				<FullScreen @click="screenfull.toggle()" />
			</el-icon>
		</div>
		<div class="mr-4">
			<el-icon class="cursor-pointer align-middle" color="gray">
				<RefreshRight @click="store.refresh()" />
			</el-icon>
		</div>
		<el-dropdown trigger="click">
			<div class="el-dropdown-link _avatar-dropdown">
				<img :src="avatar" class="_user-avatar w-40px h-40px mr-4" />
				<div class="_user-name mt-4px">
					<span>{{store.accountInfo.name}}</span>
					<el-icon class="el-icon--right"> <arrow-down /> </el-icon>
				</div>
			</div>
			<template #dropdown>
				<el-dropdown-menu v-if="VITE_ACCESS_MODE !== 'every'">
					<el-dropdown-item @click="clickExit">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
</template>

<script setup>
	import { ElIcon, ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus';
	import { FullScreen, RefreshRight, ArrowDown } from '@element-plus/icons-vue';
	import { APP_CONFIG } from '@/jiessConfig/consts';
	import { useRouter } from 'vue-router';
	import screenfull from 'screenfull';
	import { useStore } from '@/store';

	const { VITE_CONFIG_BASE, VITE_ACCESS_MODE } = import.meta.env;
	const avatar = VITE_CONFIG_BASE + "/images/common/icon.png";
	const { routeLogin } = APP_CONFIG;
	const router = useRouter();
	const store = useStore();
	const clickExit = () => {
		router.push(routeLogin.path);
		store.setAccountInfo({});
	}
</script>


<style lang="scss" scoped>
	._tool-bar {
		._avatar-dropdown {
			display: flex;
			align-items: center;

			._user-avatar {
				cursor: pointer;
				border-radius: 50%;
			}

			._user-name {
				cursor: pointer;
			}
		}
	}
</style>